<template>
  <view class="index tn-safe-area-inset-bottom">
    <!-- banner -->
    <view class="top">
      <tn-swiper :data="swiperData" height="646" radius="0"></tn-swiper>
    </view>
    <!-- content -->
    <view class="content">
      <view class="tn-col-12 tn-flex-start-between tn-flex-wrap">
        <view
          v-for="(item, index) in listData"
          :key="index"
          @tap.stop="handleItemClick(item.url)"
          class="item">
          <view class="item__bg tn-bg-blue--gradient--light"></view>
          <view class="content">
            <view class="title">{{ item.title }}</view>
            <view class="path tn-color-grey">
              <view class="path-icon"><tn-icon icon="code"></tn-icon></view>
              <view class="path-value">{{ item.path }}</view>
            </view>
          </view>
          <view class="icon">
            <tn-icon :icon="item.icon"></tn-icon>
            <!-- <view style="width: 100%;height: 100%;background-color: #00000055;"></view> -->
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import TnIcon from '@/tuniao-ui/components/tn-icon/src/Icon.vue'
import TnSwiper from '@/tuniao-ui/components/tn-swiper/src/Swiper.vue'
import { navPage } from '@/tuniao-ui/utils'
import { PageListData, getIndexList } from '@/api/page'
import { SwiperData, getIndexSwiper } from '@/api/swiper'
import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'

// 获取展示列表数据
let listData = ref<PageListData[]>([])
const getListData = () => {
  listData.value = []
  getIndexList().then((res) => {
    listData.value = res.data
  })
}
getListData()

// 获取轮播图数据
let swiperData = ref<SwiperData[]>([])
const getSwiperData = () => {
  swiperData.value = []
  getIndexSwiper().then((res) => {
    swiperData.value = res.data
  })
}
getSwiperData()

// 跳转到对应的页面
const handleItemClick = (url: string) => {
  navPage(url)
}

onShareAppMessage(() => {
  return {}
})
onShareTimeline(() => {
  return {}
})
</script>

<style lang="scss" scoped>
.index {
  width: 100%;

  .top {
    width: 100%;
  }

  @import '../../static/style/list-page.scss';
}

</style>
